<template>
    <div class="page-wrap">
        <div class="page-cont" v-if="detail && detail.pmpSsProductVersionDTOS">
            <HCollapse collapse v-for="item of detail.pmpSsProductVersionDTOS" :key="item.id">
                <template #title>
                    <flexbox class="font-w-b" :style="getVersionStyle(item.realSsStatus)">
                        <HToolTip style="width: 100px; flex-shrink: 0" :title="item.versionNumber">
                            <span>{{ item.versionNumber }}</span>
                        </HToolTip>

                        <HToolTip class="margin-l-16" style="width: 140px; flex-shrink: 0" :title="item.pmpProductDetailDTO.systemName">
                            <span>{{ item.pmpProductDetailDTO.systemName }}</span>
                        </HToolTip>
                        <!-- <span
                            class="margin-l-16"
                            style="width: 140px; flex-shrink: 0; text-overflow: ellipsis; overflow: hidden; white-space: nowrap"
                            v-if="item.pmpProductDetailDTO.systemName"
                        >
                            {{ item.pmpProductDetailDTO.systemName }}
                        </span> -->
                        <HToolTip
                            style="width: 250px; margin-left: 16px"
                            :title="`计划：${item.randdPlanStartTime || '暂无'} ～ ${item.expectTime || '暂无'}`"
                        >
                            <span>计划：{{ item.randdPlanStartTime || '暂无' }} ～ {{ item.expectTime || '暂无' }}</span>
                        </HToolTip>
                        <HToolTip style="width: 200px; margin-left: 16px" :title="`实际上线：${item.onlineRealTime || '暂无'}`">
                            <span>实际上线：{{ item.onlineRealTime || '暂无' }}</span>
                        </HToolTip>
                    </flexbox>
                </template>

                <flexbox direction="column" style="width: 100%; height: 100%; margin-top: 8px">
                    <flexbox style="width: 100%">
                        <div style="width: 50%">
                            <div style="font-weight: bold; margin-bottom: 12px; margin-left: 15px">规划内容：</div>
                        </div>
                        <div style="width: 50%">
                            <div style="font-weight: bold; margin-bottom: 12px; margin-left: 15px">实际交付：</div>
                        </div>
                    </flexbox>
                    <flexbox align="flex-start" style="width: 100%">
                        <div style="width: 50%">
                            <div
                                style="padding: 0 20px 0 14px"
                                v-if="
                                    !(item.signpostSsBusinessDTOS && item.signpostSsBusinessDTOS.length) &&
                                    !(item.signpostSsProductDTOS && item.signpostSsProductDTOS.length)
                                "
                            >
                                <a-alert message="暂无数据" type="warning" show-icon />
                            </div>

                            <CommonTaskRequireList
                                :systemName="item.pmpProductDetailDTO.systemName"
                                :list="item.signpostSsBusinessDTOS"
                                v-if="item.signpostSsBusinessDTOS && item.signpostSsBusinessDTOS.length"
                            />
                        </div>
                        <div style="width: 50%">
                            <div
                                style="padding: 0 20px 0 14px"
                                v-if="!(item.businessDTOS && item.businessDTOS.length) && !(item.productDTOS && item.productDTOS.length)"
                            >
                                <a-alert message="暂无数据" type="warning" show-icon />
                            </div>
                            <CommonTaskRequireList
                                :systemName="item.pmpProductDetailDTO.systemName"
                                :list="item.businessDTOS"
                                v-if="item.businessDTOS && item.businessDTOS.length"
                            />
                        </div>
                    </flexbox>
                    <flexbox align="flex-start" style="width: 100%">
                        <div style="width: 50%">
                            <CommonProRequireList
                                :list="item.signpostSsProductDTOS"
                                v-if="item.signpostSsProductDTOS && item.signpostSsProductDTOS.length"
                            />
                        </div>
                        <div style="width: 50%">
                            <CommonProRequireList :list="item.productDTOS" v-if="item.productDTOS && item.productDTOS.length" />
                        </div>
                    </flexbox>
                </flexbox>

                <template #titleExtra>
                    <flexbox justify="flex-end" align="center" style="width: 100%; color: #333b4b; padding-right: 10px">
                        <a-tag :color="getStatusColor(elem)" v-for="elem of item.realSsStatus" :key="elem">{{ elem }}</a-tag>
                    </flexbox>
                </template>
            </HCollapse>
        </div>

        <div style="padding: 8px 0" v-if="!detail">
            <a-empty />
        </div>
    </div>
</template>

<script lang="ts">
import CommonTaskRequireList from './CommonTaskRequireList.vue';
import CommonProRequireList from './CommonProRequireList.vue';
import HCollapse from './HCollapse.vue';
import { HToolTip } from '@/components';
import { defineComponent } from 'vue';
export default defineComponent({
    components: {
        HCollapse,
        CommonTaskRequireList,
        CommonProRequireList,
        HToolTip
    },
    props: {
        // 年度规划
        planDetail: {
            type: Object,
            default: () => ({})
        },
        detail: {
            type: Object,
            default: () => ({})
        }
    },
    setup() {
        const getStatusColor = (status) => {
            switch (status) {
                case '已删除':
                case '延期':
                    return '#db1c0b';
                case '进行中':
                    return '#0176d3';
                case '已上线':
                    return '#26a971';
                case '需求变动':
                    return '#FE9339';
                case '新增':
                    return 'rgb(58 55 193)';
            }
        };
        const getVersionStyle = (status) => {
            if (status.includes('已删除')) {
                return {
                    color: '#db1c0b',
                    textDecoration: 'line-through'
                };
            }
            if (status.includes('进行中')) {
                return {
                    color: '#0176d3'
                };
            }
            if (status.includes('已上线')) {
                return {
                    color: '#26a971'
                };
            }
        };
        return {
            getStatusColor,
            getVersionStyle
        };
    }
});
</script>

<style scoped lang="less">
.page-wrap {
    background: #fff;
    .page-cont {
        padding: 12px 0;
        ::v-deep(.section-wrap) {
            padding: 0;
        }
    }
}
</style>
